<template>
  <div class="blogs-wrapper">
    <div class="blogs-rec-container">
      <h3>推荐精品</h3>
      <div class="blogs-divider" />
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="item in recBlogList" :key="item.id">
          <div class="post-slide-box"  @click="showDetail(item.id)">
            <img :src="item.cover" />
            <span>{{item.title}}</span>
            <span>{{item.post_time}}</span>
            <span>{{textCut(item.content)}}</span>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <div class="blogs-content">
      <div class="blogs-content-left">
        <h3>{{displayTitle}}</h3>
        <Divider />

        <div class="blog-wrapper">
          <div class="blog-container" :style="'max-height:'+ getMaxHeight() +'px'">
            <Blog v-for="(item,id) in blogList.data" :key="id" :blogItem="item" @click.native="showDetail(item.id)"/>
          </div>

          <div class="blog-footer">
            <Button
              v-if="blogList.last_page!==1"
              type="warning"
              ghost
              size="large"
              @click="showMore"
              :loading="loading"
            >显示更多</Button>
            <span v-else>只有这么多内容啦,去别处逛逛吧~</span>
          </div>
        </div>
      </div>
      <div class="blogs-content-right">
        <h3>文章检索</h3>
        <Divider />
        <Tree :data="treeData" @on-select-change="onTreeSelect" />
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import _ from "lodash";
import Blog from "../components/Blog_Item";

export default {
  name: "blogs",
  components: {
    swiper,
    swiperSlide,
    Blog
  },
  data() {
    return {
      loading: false,
      nextPage: 2,
      swiperOption: {
        loop: true,
        autoplay: true,
        slidesPerView: 4
      },
      treeData: [
        {
          title: "最新发布",
          expand: false,
          selected: true
        }
        // {
        //   title: "热门文章",
        //   expand: false
        // }
      ],
      recBlogList: [],
      blogList: [],
      displayTitle: "最新发布",
      url: "",
      extraHeight: 0
    };
  },
  watch: {
    $route: "fetchData"
  },
  created() {
    this.axios
      .all([
        this.axios.get("/api/blog?type=recommend"), // 推荐文章列表无分页
        this.axios.get("/api/zone")
      ])
      .then(
        this.axios.spread((postRes, zoneRes) => {
          this.recBlogList = postRes.data;
          this.treeData = _.concat(this.treeData, {
            title: "文章分类",
            expand: true,
            children: zoneRes.data
          });
        })
      )
      .catch(error =>
        this.$Notice.error({ title: "网络连接失败", desc: error })
      );

    this.fetchData();
  },
  methods: {
    fetchData() {
      switch (this.$route.query.type) {
        case "hot": // 热门文章
          this.axios.get("/api/blog?type=hot").then(res => {
            this.blogList = res.data;
            this.url = "/api/blog?type=hot";
          });
          break;
        case "zone": // 按交流圈获取
          this.axios
            .get(`/api/blog?type=zone&zid=${this.$route.query.zid}`)
            .then(res => {
              this.blogList = res.data;
              this.url = `/api/blog?type=zone&zid=${this.$route.query.zid}`;
            });
          break;
        default:
          // 最新文章
          this.axios.get("/api/blog").then(res => {
            this.blogList = res.data;
            this.url = "/api/blog";
          });
          break;
      }
    },
    showMore() {
      this.loading = true;
      this.axios.get(this.url + `?page=${this.nextPage++}`).then(res => {
        this.blogList.data = _.concat(this.blogList.data, res.data.data);
        this.extraHeight = _.divide(this.getMaxHeight(), 4);
        this.loading = false;
      });
    },
    getMaxHeight() {
      if (this.blogList.total == 1) return 800;
      return (
        this.extraHeight + 300 * (this.blogList.to - this.blogList.from + 1)
      );
    },
    // 推荐文章内容简介字数控制。多余50字使用 “...” 代替
    textCut: text => _.truncate(text, { length: 45 }),
    onTreeSelect(curArray, item) {
      // 导航菜单
      this.extraHeight = 0;
      switch (item.nodeKey) {
        case 0: // 最新发布
          if (item.selected) {
            this.displayTitle = item.title;
            this.$router.push("/blogs");
          }
          break;
        // case 1: // 热门文章
        //   if (item.selected) {
        //     this.displayTitle = item.title;
        //     this.$router.push("/blogs?type=hot");
        //   }
        //   break;
        case 1: // 文章分类
          break;

        default:
          // 按交流圈分类
          this.displayTitle = item.title;
          this.$router.push(`/blogs?type=zone&zid=${item.id}`);
          break;
      }
    },
    showDetail(id) {
      this.$router.push(`/blog/${id}`);
    }
  }
};
</script>
